import React from 'react';

/**
 * 【非受控组件】
 * ** 将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码
 * ** 可以使用 ref 从 DOM 节点中获取表单数据
 * ** 渲染生命周期时，表单上的值会覆盖 DOM 节点中的value，所以可以使用 defaultValue， 
 * ** radio 和 checkBox 支持 defaultChecked， select 和 textarea 支持 defaultValue
 */
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    const params = {
      name: this.input.current.value,
      fileList: this.fileInput.current.files
    }
    console.log(params);
    event.preventDefault();
  }
  handleFile(e) {
    console.log(e);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字：
          <input type='text' ref={this.input} />
        </label>
        <br />
        <label>
          上传文件：
          <input type='file' ref={this.fileInput} />
        </label>
        <input type='submit' value='提交' />
      </form>
    );
  }
}
export default NameForm;